<template>
	<view class="page" style="">
		<nav-bar :disabled="disabled"/>
		<view class="search-content">
			<view class="box">
				<p class="p">{{$t('production.AdjustContent.5q5bj374zfg0')}}<text class="text">{{adjustProductionItem.styleNo}}</text></p>
				<p class="p">{{$t('production.AdjustContent.5q5bj3751580')}}<text class="text">{{adjustProductionItem.billNo}}</text></p>
			</view>
			<view class="box">
				<p class="p">{{$t('production.AdjustContent.5q5bj3752fw0')}}<text class="text">{{adjustProductionItem.styleName}}</text></p>
				<p class="p">{{$t('production.AdjustContent.5q5bj3755m80')}}<text class="text">{{adjustProductionItem.customerName}}</text></p>
			</view>
			<view class="toAdjust" @click="toAdjust">
				{{$t('production.AdjustContent.5q5bj3755xo0')}}
			</view>
			<view class="clear" @click="clear">
				{{$t('clear')}}
			</view>
		</view>	
		<view class="ul">
			<view class="ulLeft">
				<view class="li-item" v-for="(item, index) in leftData" :key="item.id">
					<stationItem @deleteItem="deleteItem" :currentDeviceMap="currentDeviceMap" :currentPersonMap="currentPersonMap" :data="item" :index="index" @tapClick="showModal($event, item)"/>
				</view>    
			</view>  
			<view class="ulRight">
				<view class="li-item" v-for="(item, index) in rightData" :key="item.id">
					<stationItem @deleteItem="deleteItem" :currentDeviceMap="currentDeviceMap" :currentPersonMap="currentPersonMap" :data="item" :index="index" @tapClick="showModal($event, item)"/>
				</view>    
			</view>                                                                                                                                                                                                                                                                                                                                                                                                                              
		</view>
		<view class="footer">
			<u-button class="btn" @click="backTo">
			 <text class="text">{{ $t('common.return') }}</text>
			</u-button>
			<u-button type="primary" class="btn2" @click="submit">
			 <text class="text">{{ $t('common.submit') }}</text>
			</u-button>
		</view>
		<u-modal :show="show" width="400px" :title="title" :showConfirmButton="false" :closeOnClickOverlay="true" @close="show=false">
			<view class="slot-content">
					<image @tap="showScanCode" class="scan" src="../../../static/img/scan.png"  mode=""></image>
					<text class="text">
						{{$t('production.AdjustContent.view')}} {{typeName}} {{$t('production.AdjustContent.qrcode')}}
						</text>
					<u-button class="btn" type="primary" @click="showCustom">{{$t('production.AdjustContent.5q5bj37565c0')}}</u-button>
			</view>
		</u-modal>
		<u-modal :show="show2" width="400px" :title="title" :showConfirmButton="false" :closeOnClickOverlay="true" @close="show2=false">
			<view class="slot-content">
				<view class="custom-search">
					<text class="text">{{typeName}}</text>
					<view class="search-input">
						<u-input :placeholder="placeholder" v-model="keyWord">
							<template slot="suffix">
								<view @click="search">
								<uni-icons type="search" size="20" color="#ccc"></uni-icons>
								</view>
							</template>
						</u-input>
					</view>
				</view>
				<view class="list-content">
					<view class="item" :class="{'active': current.id === item.id, 'normal': current.id !== item.id}" @click="itemClick(item)" v-for="item in customList" :key="item.id">
						<view class="item-line">
							<view class="img">
								<image v-if="type === 1 && current.id !== item.id" src="../../../static/icons/device.svg" mode=""></image>
								<image v-if="type === 1 && current.id === item.id" src="../../../static/img/device-acrive.png" mode=""></image>
								<image v-if="type === 2 && current.id !== item.id" src="../../../static/icons/person.svg" mode=""></image>
								<image v-if="type === 2 && current.id === item.id" src="../../../static/img/person-active.png" mode=""></image>

							</view>
							<view class="deviceCategory">
								{{type === 1 ? item.deviceCategory.split('-')[0] : item.realName}}
							</view>
							<view class="deviceSn">
								{{type === 1 ? `${item.deviceSn}-${item.deviceType}`: item.jobNo }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer-btn">
				<u-button size="mini" class="btn1" @click="back">{{$t('production.AdjustContent.5q5bj3756a00')}}</u-button>
				<u-button size="mini" class="btn2" type="primary" @click="submitModal">{{$t('production.AdjustContent.5q5bj3756ec0')}}</u-button>
			</view>
		</u-modal>
	</view>
</template>

<script>
import navBar from "@/components/nav-portrait/index.vue"
import stationItem from "./components/stationItem.vue"
import { getCanvasDataZ } from './typeData/canvasDataZ'
import { getCanvasDataU } from './typeData/canvasDataU'
import { getCanvasDataB } from './typeData/canvasDataB'
import { getDataType } from './components/getDataType'
import {adjustProductionLine, getSewingDeviceList, getSewingUserList, updateSewingHistory ,checkDeviceSn} from "../../../api/adjust.js"
// import { deepClone } from '../../../utils/deepClone.js'
export default{
	components:{navBar,stationItem},
	data() {
		return {
			lists:[],
			show:false,
			show2:false,
			type: 1,
			title:"",
			current: {},
			currentDeviceMap: {},
			currentPersonMap:{},
			sewingId: '',
			productionId: '',
			stationId: '',
			deviceList:[],
			userList:[],
			deviceParam: {
				keyWord:'',
				page: 1,
				limit: 9999
			},
			personParam: {
				keyWord:'',
				page: 1,
				limit: 9999
			},
			disabled: false,
			adjustProductionItem:{},
			leftData: [],
			rightData: []
		}
	},
	watch: {
		lists: {
			handler: function(data) {
				this.leftData = data.filter(item => item.cluster === 'left')
				this.rightData = data.filter(item => item.cluster === 'right')
			},
			deep: true
		}
	},
	computed:{
		typeName() {
			return this.type === 1? this.$t('production.AdjustContent.5q5bj3756jg0'): this.$t('production.AdjustContent.5q5bj3756v80')
		},
		placeholder() {
			return this.type === 1? this.$t('production.AdjustContent.5q5bj3757d00'): this.$t('production.AdjustContent.5q5bj3757i00')
		},
		customList() {
			return this.type === 1? this.deviceList: this.userList
		},
		keyWord:{
			get() {
				return this.type === 1? this.deviceParam.keyWord : this.personParam.keyWord
			},
			set(val) {
				this.type === 1 ? this.deviceParam.keyWord = val : this.personParam.keyWord = val
			}
		}
	},
	methods: {
		clear() {
			this.lists.forEach(item => {
				item.deviceSn = ''
				item.deviceName = ''
				item.deviceType = ''
				item.sewingUser = ''
				this.$set(this.currentDeviceMap, item.id, '')
				this.$set(this.currentPersonMap, item.id, '')
			})
			// this.leftData = this.lists.filter(item => item.cluster === 'left')
			// this.rightData = this.lists.filter(item => item.cluster === 'right')
		},
		search() {
			this.getData()
		},
		back() {
			this.show = true
			this.show2 = false
		},
		deleteItem(type, data) {
			if(type === 'device') {
				this.$set(data, 'deviceSn', '')
				this.$set(data, 'deviceName', '')
				this.$set(data, 'deviceType', '')
			} else {
				this.$set(data, 'sewingUser', '')
			}
		},
		checkCurrent() {
			if (this.type === 1) {
				this.$set(this.currentDeviceMap, this.stationId, this.current)
				//处理数据
				this.lists.forEach(item => {
					if(item.id === this.stationId) {
						item.deviceSn = this.current.deviceSn
					}
				})
			} else {
				this.$set(this.currentPersonMap, this.stationId, this.current)
				//处理数据
				this.lists.forEach(item => {
					if(item.id === this.stationId) {
						item.sewingUser = this.current.id
					}
				})
			}
		},
		submitModal() {
			this.show2 = false
			// this.current.id = -1
			this.checkCurrent()
		},
		itemClick(item) {
			if(this.lists.some(v => v.deviceSn === item.deviceSn)) {
				plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('production.AdjustContent.5q5bj3757m80')}</p>`,{
						type: "richtext",
						duration: "long",
						verticalAlign: "middle"
					}
				);
				return
			}

			this.current = item
		},
		showCustom() {
			this.show = false
			this.show2 = true
			this.getData()
		},
		getData() {
			this.type === 1? this.getDeviceList() : this.getUserList()
		},
		getDeviceList() {
			getSewingDeviceList({
				sewingId: this.sewingId,
				productionId: this.productionId,
				...this.deviceParam
			}).then(res => {
				if(res.code!==0) {
					return
				}
				this.deviceList = res.data.list
			})
		},
		getUserList() {
			getSewingUserList({
				sewingId: this.sewingId,
				productionId: this.productionId,
				...this.personParam
			}).then(res => {
				if(res.code!==0) {
					return
				}
				this.userList = res.data.list
			})	
		},
		showScanCode() {
			// #ifdef APP-PLUS
			var that = this
			plus.screen.lockOrientation('landscape-primary')
			// #endif	
			setTimeout(() => {
				uni.scanCode({
					success:function(res){
						that.show = false
						let result = JSON.parse(JSON.stringify(res)).result
						if(that.lists.some(list => list.deviceSn === result.split('*')[0])) {
							// #ifdef APP-PLUS
								plus.nativeUI.toast(`<p style=\"font-size: 28px\">${that.$t('production.AdjustContent.5q5bj3757m80')}</p>`,{
									type: "richtext",
									duration: "long",
									verticalAlign: "middle"
								}
								);
							// #endif
							// uni.$u.toast(that.$t('production.AdjustContent.5q5bj3757m80'))
							return
						} else {
							checkDeviceSn({deviceSn:result.split('*')[0]}).then(res => {
								if(res.code === 0) {
									let deviceSn = result.split('*')[0]
									let deviceType = result.split('*')[1] || ''
									that.lists.forEach(item => {
										if(item.id === that.stationId) {
											item.deviceSn = result.split('*')[0]
											that.$set(that.currentDeviceMap, that.stationId, {
												deviceSn: deviceSn,
												deviceType: deviceType,
											})
										}
									})
								}
							})
							
						}
						plus.screen.lockOrientation('portrait-primary')
					},
					
					complete:function(res){
						plus.screen.lockOrientation('portrait-primary')	
					}
				})
			}, 500)
		},
		showModal(type,item) {
			// plus.nativeUI.toast('<span style="color:red">'+333333+'</span>',{
			// 	type:'richText',
			// 	background:'rabg(0,0,0,0.8)',
			// 	duration: 2000,
			// 	align: 'center',
			// 	verticalAlign: 'bottom',
			// })
			this.stationId = item.id
			this.type = type
			this.show = true
		},
		navigate(url) {
			uni.navigateTo({
				url: `${url}`
			})
		},
		backTo() {
			uni.navigateBack()
		},
		submit() {
			// let data = deepClone(this.lists)
			// data.forEach(d => {
			// 	d.processesDtos.forEach(item => delete item.id)
			// })
			updateSewingHistory(this.lists).then(res => {
				if(res.code !== 0) {
					return
				}
				// #ifdef APP-PLUS
				plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('production.AdjustContent.5q5bj3757u80')}</p>`,{
									type: "richtext",
									duration: "long",
									verticalAlign: "middle"
								}
								);
							// #endif
							// uni.$u.toast(this.$t('production.AdjustContent.5q5bj3757u80'))
				uni.navigateTo({
					url: `/pages/quality/production/ProductionAdjustment?sewingId=${this.sewingId}`
				})
			})
		},
		toAdjust() {
			this.navigate(`/pages/quality/production/AdjustDetail?productionId=${this.productionId}&sewingId=${this.sewingId}`)
		},
		getList() {
			adjustProductionLine({sewingId:this.sewingId,productionId: this.productionId}).then(res => {
				if(res.code!==0){
					return
				}
				try {
					this.lists = this.$store.state.sewingStationHistoryList.length?this.$store.state.sewingStationHistoryList:res.data.sewingStationHistoryList
					const dataType = getDataType(this.lists)
					let typeData 
					let type = 0
					if (this.lists && this.lists.length > 1) {
						if (['newZ', 'oldZ'].includes(dataType)) type = 0
						if (['newB', 'oldB'].includes(dataType)) type = 1
						if (['newU', 'oldU'].includes(dataType)) type = 2
						const getTypeData = type === 0 ? getCanvasDataZ : type === 1 ? getCanvasDataB : getCanvasDataU
						typeData = getTypeData(this.lists.length)

						typeData.nodes = typeData.nodes?.map((item) => {
							const target = this.lists?.find((i) => item.sort === i.stationNo)
							return {
								...item,
								...target
							}
						})
					}
					this.lists = typeData.nodes
					//处理回显
					this.lists.forEach(item => {
						this.$set(this.currentDeviceMap, item.id, {
							deviceSn:item.deviceSn,
							deviceType:item.deviceType,
						})
						this.$set(this.currentPersonMap, item.id, {
							realName: item.sewingUserName
						})
					})

					// console.log(this.currentDeviceMap,'this.currentDeviceMap');
					
					this.$store.commit('SET_SEWING_LIST', this.lists)
				} catch (error) {
					console.log("🚀 ~ file: AdjustContent.vue:383 ~ adjustProductionLine ~ error:", error)
				}
			})
		}
	},
	onLoad(option) {
		this.disabled = !!option.productionId
		this.productionId = option.productionId
		this.sewingId = option.sewingId
		this.adjustProductionItem = this.$store.state.adjustProductionItem
		
		this.getList()
	},
	mounted() {
		
	// uni.$u.toast(this.$t('production.AdjustContent.5q5bj3757m80'))
	// #ifdef APP-PLUS
	plus.screen.lockOrientation('portrait-primary'); 
	// #endif
	}
}
</script>

<style lang="scss" scoped>
	.page{
		position: fixed;
		height: 100vh;
		width: 100vw;
		// font-size: 1.2rem;
		background: #F3F3F3;
		overflow: hidden;
		// overflow-y: hidden;
		// overflow-x: auto;
		// box-sizing: border-box;
		flex-grow: 1;
		// overflow-y:auto; 
		.search-content {
			height: 136rpx;
			opacity: 1;
			width: 100%;
			background: #FFFFFF;
			
			box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
			display: flex;
			position: relative;
			.box {
				font-family: AlibabaPuHuiTi;
				font-size: 18rpx;
				font-weight: 500;
				line-height: 38rpx;
				letter-spacing: 0px;
				width: 35%;
				.p {
					margin: 18rpx;
					color: #333333;
					width: 240rpx;
					overflow: hidden;
					text-overflow:ellipsis; 
					white-space: nowrap
				}
				.text {
					color: #585858;
					width: 200rpx;
				}
			}
			.toAdjust {
				font-family: AlibabaPuHuiTi;
				font-size: 20rpx;
				font-weight: 500;
				line-height: 33rpx;
				text-align: center;
				color: #3E8FF7;
				position: absolute;
				right: 5%;
				top: 22%;
			}

			.clear {
				font-family: AlibabaPuHuiTi;
				font-size: 20rpx;
				font-weight: 500;
				line-height: 33rpx;
				text-align: center;
				color: #3E8FF7;
				position: absolute;
				right: 5%;
				top: 52%;
			}
		}
		::v-deep .u-input {
				height: 50rpx;
			  width: 260rpx;
		    }
		.ul {
			padding-top: 12rpx;
			height: calc(100vh - 256rpx);
			overflow-y: auto;
			padding-bottom: 400rpx;
			display: flex;
			justify-content: space-evenly;

			.ulLeft {
				margin-left: 1%;
				width: 50%;
			}
			.ulRight {
				margin-left: 1%;
				width: 50%;
			}
			.li-item {
				display:inline-block;
				margin:1%;
			}
		}
		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 53rpx;
			background-color: #FFFFFF;
			line-height: 53rpx;
			color: #000;
			box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.3);
			display: flex;
			.btn {
				width: 30%;
				margin-left: 2%;
				margin-top: 9rpx;
				.text {
					font-size: 24rpx;
					font-weight: 500;
					color: #585858;
				}
			}
			.btn2 {
				width: 65%;
				margin-left: 1%;
				margin-top: 9rpx;
				.text {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.footer-btn {
			    position: absolute;
			    bottom: 0;
			    /* display: flex; */
			    width: 100%;
			    height: 48rpx;
			    opacity: 1;
			    background: #FFFFFF;
			    box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.3);
				// display: flex;
				// align-items: center;
				text-align: right;
				.btn1,.btn2 {
					width: 60rpx;
					display: inline-block;
					height: 32rpx;
					line-height: 32rpx;
					margin-top: 8rpx;
					margin-right: 20rpx;
				}
				.btn1 {
					// margin-right: 20rpx;
				}
				
		}
		.slot-content {
			position: relative;
			height: 300rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-items: center;
			align-items: center;
			padding-bottom: 30rpx;
			.scan {
				width: 200rpx;
				height: 200rpx;
				margin-top: 30rpx;
			}
			.text {
				margin-top: 16rpx;
				font-family: AlibabaPuHuiTi;
				font-size: 16rpx;
				font-weight: normal;
				line-height: 36rpx;
				letter-spacing: 0px;
				
				/* 中性色/输入框已输入字 */
				color: #585858;
			}
			.btn {
				position: absolute;
				width: 110rpx;
				height: 30rpx;
				right: 0rpx;
				bottom: 0rpx;
			}
			.custom-search {
				width: 100%;
				display: flex;
				align-items: center;
				justify-items: center;
				.text {
					font-family: AlibabaPuHuiTi;
					font-size: 16rpx;
					font-weight: bold;
					line-height: 32rpx;
					letter-spacing: 0px;
					margin-top: 0;
					/* 33 */
					color: #333333;
				}
				.search-input {
					margin-left: 20rpx;
					 ::v-deep .u-input {
						 height: 26rpx;
						 width: 200rpx;
					 }
				}
			}
			.list-content {
				position: relative;
				height: 300rpx;
				overflow-y: auto;
				width: 100%;
				margin-top: 10rpx;
				.active {
					background-color: #3E8FF7;
					color: #fff ;
				}
				.normal {
					background: #E1F2FF;
					/* 主色/主色 */
					color: #3E8FF7;
				}
				.item {
					// margin: 5rpx 0;
					&:not(:last-child) {
						margin: 10rpx 0;
					}
					.item-line {
						display: flex;
						align-items: center;
						
						
						box-sizing: border-box;
						/* 主色/主色 */
						border: 2rpx solid #3E8FF7;
						image {
							width: 16rpx;
							height: 16rpx;
							margin: 2rpx 14rpx 0 6rpx;
						}
						.deviceCategory {
							font-family: AlibabaPuHuiTi;
							font-size: 18rpx;
							font-weight: normal;
							line-height: 18rpx;
							letter-spacing: 0px;
							width: 150rpx;
							
							
						}
						.deviceSn {
							margin-left: 20rpx;
							font-family: AlibabaPuHuiTi;
							font-size: 18rpx;
							font-weight: normal;
							line-height: 18rpx;
							letter-spacing: 0px;
							
							
						}
					}
				}
			}
		}
		
	}
</style>
